<template>
    <div>
      <el-button
        size="small"
        v-if="allImages == false"
        type="primary"
        @click="downloadFunc"
        :disabled="disabled"
        >下载</el-button
      >
      <el-button
        size="small"
        v-else-if="allImages == true"
        type="primary"
        @click="look"
        >查看</el-button
      >
      <el-button size="small" v-else-if="allImages === 'e'">无附件</el-button>
      <el-dialog
        :title="this.$store.state.mindName"
        :visible.sync="dialogVisible"
        v-if="this.value && PDF != '.pdf'"
        width="50%"
        append-to-body
      >
        <div id="img_pdf">  
          <template>
            <el-image
              :src="this.review[0]"
              :preview-src-list="this.review"
            ></el-image>
          </template>
        </div>
      </el-dialog>
      <el-dialog
        :title="this.$store.state.mindName"
        :visible.sync="dialogVisible"
        v-else-if="PDF == '.pdf'"  
        fullscreen
        width="50%"
        :show-close="false"
        append-to-body
      >
        <div class="img_pdg">
           <div class="goto" @click="dialogVisible = false">
            <i class="el-icon-back"></i>
            <span>{{$store.state.mindName}}</span>
          </div>
          <template>
            <div id="pdf_upt" @mouseover="changeActive" @mouseout="removeActive">
              <iframe
                class="ifrname"
                :src="this.review[index]"
                type="application/x-google-chrome-pdf"
                width="100%"
                height="100%"
              />
              <div :class="[isshow == true ? 'pdf_left' : '']" @click="left">
                <i class="el-icon-d-arrow-left"></i>
              </div>
              <div :class="[isshow == true ? 'pdf_right' : '']" @click="right">
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
          </template>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import { downloadFile } from "./download";
  export default {
    name: "FileLoader",
    props: {
      value: {
        type: String,
        default: "",
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        dialogVisible: false,
        PDF: "",
        fullscreen: true,
        index: 0,
        oplist: [],
        isshow: false,
      };
    },
    created() {
    if(this.value==null){
  
    }else{
      if(this.value.includes(',')){
        this.oplist = this.value.split(",");
      }
    }
     
      
    },
    computed: {
      //预览
      review: function () {
        if (this.value) {
          let temp = [];
          if (this.value.indexOf(",") >= 0) {
            let split = this.value.split(",");
            for (var i = 0; i < split.length; i++) {
              if (split[i] != "") {
                temp.push(split[i]);
              }
            }
            return temp;
          } else {
            temp.push(this.value);
            return temp;
          }
        }
      },
      allImages: function () {
        if (this.value) {
          if (this.value.indexOf(",") >= 0) {
            let split = this.value.split(",");
            for (var i = 0; i < split.length; i++) {
              if (split[i] != "") {
                let a = this.legalExt(split[i]);
                if (!a) {
                  return false;
                }
              }
            }
            return true;
          } else {
            if (this.legalExt(this.value)) {
              return true;
            } else {
              return false;
            }
          }
        } else {
          return "e";
        }
      },
    },
    methods: {
      changeActive() {
        this.isshow = true;
      },
      removeActive() {
        this.isshow = false;
      },
      left() {
        if (this.index == 0) {
          this.$message({
            message: "没有更多了",
            type: "warning",
          });
          return;
        } else {
          this.index -= 1;
        }
      },
      right() {
        if (this.oplist.length - 1 == this.index) {
          this.$message({
            message: "没有更多了",
            type: "warning",
          });
          return;
        } else {
          this.index += 1;
        }
      },
      //查看
      look() {
        this.dialogVisible = true;
      },
      //下载
      downloadFunc() {
        if (this.value.indexOf(",") >= 0) {
          let split = this.value.split(",");
          for (var i = 0; i < split.length; i++) {
            if (split[i] != "") {
              let num = split[i].lastIndexOf(".");
              let dis = split[i].substring(num + 1, num + 4);
  
              if (dis == "pdf" || dis == "PDF") {
                downloadFile(split[i], "a");
              } else {
                downloadFile(split[i], "iframe");
              }
            }
          }
        } else {
          let num = this.value.lastIndexOf(".");
          let dis = this.value.substring(num + 1, num + 4);
          if (dis == "pdf" || dis == "PDF") {
            downloadFile(this.value, "a");
          } else {
            downloadFile(this.value, "iframe");
          }
        }
      },
      // 支持类型
      legalExt(filename) {
        let supportExt = [
          ".pdf",
          ".PDF",
          ".png",
          ".PNG",
          ".jpg",
          ".JPG",
          ".jpeg",
          ".JPEG",
        ];
        for (let i = 0; i < supportExt.length; i++) {
          this.PDF = supportExt[i];
          if (filename.indexOf(supportExt[i]) > 0) {
            return true;
          }
        }
        return false;
      },
    },
    watch: {
      // "value": function() {
      //     this.model = this.value
      // }
    },
  };
  </script>
  <style lang="scss" scoped>
  :deep(.el-dialog) .el-dialog__body {
    height: 100%;
    display: flex;
    justify-content: center;
  }
  
  #img_pdf {
   
    // height: 60vh;
    overflow-y: scroll;
  }
  .img_pdg {
   width: 100%; 
    height: 80vh;
    
    .goto{
      margin-bottom: 20px;
        .el-icon-back {
          font-size: 50px;
        }
    }
   
  }
  #pdf_upt {
    width: 100%;
    height: 100%;
    position: relative;
    .ifrname {
      width: 100%;
      height: 100%;
    }
    .pdf_left {
      position: absolute;
      width: 100px;
      height: 100px;
      transition: all 0.5s;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      .el-icon-d-arrow-left {
        font-size: 100px;
        color: #1488f5;
      }
    }
    .pdf_right {
      position: absolute;
      width: 100px;
      height: 100px;
      transition: all 0.5s;
      right: 0;
      top: 50%;
      transform: translate(-50%, 0);
      .el-icon-d-arrow-right {
        font-size: 100px;
        color: #1488f5;
      }
    }
  }
  </style>
  